<template>
  <section class="login-wrap" :style="{backgroundImage:`url(${loginBg})`}">
    <div class="login-box">
      <van-field
        v-model="mobile"
        name="mobile"
        clearable
        placeholder="请输入手机号"
        data-vv-scope="user"
        v-validate="'required|mobile'"
        maxlength="11"
        :error="errors.has('user.mobile')"
        :error-message="errors.first('user.mobile')"
      />
      <van-field
        v-model="code"
        name="code"
        clearable
        v-validate="'required|min:4'"
        maxlength="4"
        :error="errors.has('code')"
        :error-message="errors.first('code')"
        placeholder="请输入验证码"
      >
        <van-button
          slot="button"
          size="small"
          :disabled="countdown > 0"
          @click="sendMobileCode"
        >{{ countdown ? countdown + 's' : '发送验证码'}}</van-button>
      </van-field>
      <van-radio-group v-model="identity" placeholder="请选择身份">
        <van-radio name="company">
          需求方
          <img
            width="16"
            slot="icon"
            slot-scope="props"
            :src="props.checked ? user_active : user_inactive"
          />
        </van-radio>
        <van-radio name="noCompany">
          承揽方
          <img
            width="16"
            slot="icon"
            slot-scope="props"
            :src="props.checked ? user_active : user_inactive"
          />
        </van-radio>
      </van-radio-group>
      <div class="submit" @click="handleSubmit">登录</div>
    </div>
  </section>
</template>


<script>
// import { EnumAll } from './enum'
// console.log('EnumAll: ', EnumAll);
import user_active from '@/assets/images/user_active.png'
import user_inactive from '@/assets/images/user_inactive.png'
import lingGong from '@/assets/images/loginBg/lingGong.png'
import zhongWaiQi from '@/assets/images/loginBg/zhongWaiQi.jpg'
import { setIdentity } from '@/utils/userAuth'
import {
  createNamespacedHelpers,
  mapState as rootState,
  mapActions as rootActions,
} from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('myData')

export default {
  name: 'loginPage',
  data() {
    return {
      lingGong,
      zhongWaiQi,
      user_active,
      user_inactive,
      countdown: 0,
      identity: 'company',
      mobile: '',
      code: '',
    }
  },

  components: {},
  computed: {
    ...mapState(['points']),
    loginBg() {
      switch (sessionStorage.getItem('companyName')) {
        case '中外企灵工':
          return this.zhongWaiQi
        default:
          return this.lingGong
      }
    },
  },
  methods: {
    ...rootActions([
      'getValidationCode',
      'companyLoginByValidationCode',
      'loginByValidationCode',
    ]),
    ...mapActions(['getUserDetail']),
    sendMobileCode() {
      this.$validator.validateAll('user').then((result) => {
        // console.log(result, 'result')
        if (result) {
          this.countdown = 60
          this.getValidationCode(this.mobile)
          this.countdownSubtract()
        }
      })
    },
    countdownSubtract() {
      if (this.countdown > 0) {
        setTimeout(() => {
          this.countdown -= 1
          this.countdownSubtract()
        }, 1000)
      }
    },
    handleSubmit() {
      this.$validator.validate().then((result) => {
        if (result) {
          const { mobile, code, identity } = this
          if (identity == 'company') {
            this.companyLoginByValidationCode({ mobile, code }).then((res) => {
              setIdentity('company')
              if (res.AuditStatus == 'EDITING') {
                this.$router.push('improvementCompany')
              } else {
                this.$router.push('/')
              }
            })
          } else {
            this.loginByValidationCode({ mobile, code }).then(async (res) => {
              if (res) {
                await this.getUserDetail()
                setIdentity('user')
                if (this.userDetail && this.userDetail.dataPerfection) {
                  this.$router.push('/')
                } else {
                  this.$router.push('improvementPersonal')
                }
              }
            })
          }
        }
      })
    },
  },
}
</script>

<style lang='less' scoped>
.login-wrap {
  height: 100vh;
  background: no-repeat center top;
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  .login-box {
    width: 300px;
    height: 220px;
    padding: 30px 0 35px 44px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 6px 20px rgba(122, 197, 239, 1);
    opacity: 1;
    border-radius: 50px 0px 0px 50px;
    margin-top: 55%;
    position: relative;
    .van-radio-group {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      .van-radio {
        width: 105px;
        font-size: 14px;
        color: #666;
      }
    }
    .van-cell {
      border-bottom: 1px solid #cccccc;
      padding: 18px 20px 3px 0;

      .van-button--default {
        border: none;
        font-size: 14px;
        color: #7ac5ef;
      }
    }
    .submit {
      position: absolute;
      right: 0;
      bottom: -33px;
      width: 176px;
      height: 63px;
      line-height: 63px;
      background: linear-gradient(
        44deg,
        rgba(122, 197, 239, 1) 0%,
        rgba(219, 231, 255, 1) 100%
      );
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      border-radius: 50px 0px 0px 50px;
      color: white;
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
